<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view class="h" :class="{isFootBarShow:$route.meta.isFootBar}" />
    </transition>
    <!-- 路由元信息中如果有isFootBar展示foot-bar -->
    <FootBar v-if="$route.meta.isFootBar" />
  </div>
</template>
<script>
// import { security } from '@/utils/security'
import FootBar from '@/components/FootBar'
export default {
  components: {
    FootBar
  },
  data() {
    return {
      animate: ''
    }
  },
  watch: {
    $route: function(to, from) {
      // 通过'/'判断是一级导航还是多级导航
      var newP = to.path.split('/')
      var oldP = from.path.split('/')
      // 去的路由比来的大 则是进入事件

      if (newP.length > oldP.length) {
        this.animate = 'van-slide-right'
      } else if (newP.length === oldP.length) {
        // 相等 淡入
        this.animate = 'van-fade'
      } else {
        // 去的比来的小 返回事件
        this.animate = 'van-slide-left'
      }
    }
  }

}
</script>

<style lang="scss">
html,
body {
  height: 100%;
  overflow: hidden;

}
#app {
  height: 100%;
  background-color: #fff;
  .h{
    height: 100%;
    &.isFootBarShow{
      height: calc(100% - 102px);
    }
  }
}
.fade-enter-active {
  transition: all 0.2s ease;
}
.fade-leave-active {
  transition: all 0.2s ease;
}
.fade-enter, .fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
</style>
